<script lang="ts" setup>
import { computed } from 'vue'
import { Pagination, Navigation, Autoplay } from 'swiper'
import useStore from '@/stores'
// 轮播图banner
const modules = [Pagination, Navigation, Autoplay]
// 获取数据
const { homeStore } = useStore()
// const bannerList = ref([])
homeStore.getUserProfile()
console.log(homeStore.newList)

const jsonParse = (val: any) => {
    return JSON.parse(JSON.stringify(val))
}

// 首页样式变量
const styleInt = computed(() => {
    return `<style>
                :root {
                    --fontColor: ${'rgba(' + homeStore.bgColor + ')'};
                }
            </style>`
})
</script>
<template>
    <div class="style-wrap" v-html="styleInt"></div>
    <div class="wrapper">
        <Header />
        <div class="title">11111</div>
        <div class="new-list" v-for="(item, index) in homeStore.newList" :key="`new${index}`">{{item}}</div>
        <div class="swiper-wraper">
            <swiper
                class="swiper swiper-home"
                :modules="modules"
                :slides-per-view="1"
                :mousewheel="true"
                :loop="true"
                :auto-height="true"
                :pagination="{
                    clickable: true
                }"
                :autoplay="{
                    delay: 5000,
                    disableOnInteraction: false
                }"
                :navigation="true"
                >
                <swiper-slide v-for="(item, index) in jsonParse(homeStore.bannerList)" :key="`banner${index}`" class="slide slide-page slide1">
                    <div class="swiper-zoom-container">
                        <img :src="item.img1920" class="img" data-type="pc" alt="" />
                    </div>
                </swiper-slide>
            </swiper>
        </div>
    </div>
</template>

<style lang="scss" scoped>
@import '@/assets/styles/home_pc.scss';
</style>
